<template>
  <div class="user">
    <nav-bar
      class="user-title"
      title="账号管理"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <icon name="search" size="18" />
      </template>
    </nav-bar>
    <cell-group inset style="margin-top: 1rem">
      <cell value="个人信息" is-link :to="{ name: 'changeInfo' }">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <!-- <span class="custom-title">单元格</span>
           -->
          <span class="custom-title"
            ><img :src="urlImg(userList.avatar)" alt="上传图像"
          /></span>

          <van-tag type="danger">{{
            userList.nickName ? userList.nickName : userList.userName
          }}</van-tag>
        </template>
      </cell>
      <cell value="新增/修改地址" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">地址管理</span>
        </template>
      </cell>
    </cell-group>
    <cell-group inset style="margin-top: 1rem">
      <cell value="修改密码/手机" is-link :to="{ name: 'changpassword' }">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">账户与安全</span>
        </template>
      </cell>
      <cell value="未开启" is-link>
        <template #title>
          <span class="custom-title">关怀版</span>
        </template>
      </cell>
      <cell value="未实名" is-link>
        <template #title>
          <span class="custom-title">实名认证</span>
          <tag type="danger">标签</tag>
        </template>
      </cell>
      <cell value="支付密码/指纹支付" is-link>
        <template #title>
          <span class="custom-title">支付设置</span>
        </template>
      </cell>
      <cell value="增加增票资质" is-link>
        <template #title>
          <span class="custom-title">增票资质</span>
        </template> </cell
      ><cell value="添加宝宝信息" is-link>
        <template #title>
          <span class="custom-title">我的档案</span>
        </template>
      </cell>
      <cell title="单元格" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <icon name="search" class="search-icon" />
        </template>
      </cell>
    </cell-group>

    <cell-group inset style="margin-top: 1rem">
      <cell title="第三方服务管理" is-link />
      <cell title="隐私设置" is-link />
      <cell title="系统权限申请和使用清单" is-link />
      <cell title="个人信息收集和使用清单" is-link />
    </cell-group>
    <cell-group inset style="margin-top: 1rem">
      <cell title="通用设置" value="联系客服/清除缓存" is-link />
      <cell title="建议反馈" is-link />
      <cell title="关于舒宁易购" is-link />
    </cell-group>
    <Button
      type="warning"
      block
      style="width: 93vw; margin: 2rem auto"
      @click="logOutHandle"
      >退出登录</Button
    >
  </div>
</template>
<script setup>
import { NavBar, Toast, Icon, Cell, CellGroup, Button } from "vant";

import { urlImg } from "../uitils/urlImg";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useInfoAPI } from "../services/auth";
import { removeToken } from "../uitils/Token";
const { push } = useRouter();
const onClickLeft = () => history.back();
const onClickRight = () => Toast("搜索");
const userList = ref({});
useInfoAPI().then((res) => {
  if (res.code === 1) {
    userList.value = res.data;
  }
});
// 退出登录
const logOutHandle = () => {
  removeToken();
  setTimeout(() => {
    push({
      name: "home",
    });
  }, 2000);
};
</script>
<style lang="scss" scoped>
.user {
  background-color: #f5f5f9;
  .user-title {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    img {
      max-width: 2rem;
      max-height: 2rem;
    }
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
}
</style>
